<template>
<div class="game-position">
  <div class='header'>
	<div class='part1'>股票代码</div>
	<div class='part2'>持仓成本</div>
	<div class='part3'>持仓数量</div>
	<div class='part4'>现价</div>
	<div class='part5'>仓位</div>
  </div>	
  <gj-loadmore :bottom-method="loadBottom" :bottomPullText="bottomPullText" ref="loadmore">

  <div v-for="item in list">
	  <div id="index">
           <div class="stock-detail" @click="toQuotation(item)">
               <div class='part1'>
                    <div class="stock-name" v-text="item.stock_name"></div>
                    <div class="stock-code" v-text="item.exchange_type + item.stock_code"></div>                 
               </div>
               <div class='part2 text-middle' v-text='Number(item.keep_cost_price).toFixed(2)'></div>
               <div class='part3 text-middle' v-text='Number(item.current_vol)'></div>
               <div class='part4 text-middle' v-text="Number(item.last_price).toFixed(2) ||  '--'"></div>
               <div class='part5 text-middle' v-text="Number(item.position).toFixed(2) + '%'||  '--'"></div>
           </div>          
           <div class="grey-line-long-second"></div>
    </div>
  </div>
  
  <!----  报错的信息   ------->
  <div v-if="showError" class="error" v-text="errorMessage"></div>

 </gj-loadmore>  
 </div>

	
</template>
   
<script>	
	import LocalDAO from 'common/localDAO'
	import RemoteDAO from 'common/remoteDAO'
	import LoadMore from 'components/LoadMore'
	import CommonUtil from 'common/common.util'
	
	 export default {
    	data () {
    		return {
    			list:[],
    			pageNum : 0,
    			pageSize : 20,
    			gameId : "",
    			errorMessage : "error",
    			showError : false,
    			hasmore : true,
    			bottomPullText:"向上滑动加载更多"
    		}
    		
      },
       components:{
      		'gj-loadmore':LoadMore
    	 },
       created () {
       		this.$store.dispatch('setLoading', {visible: true});            
    	 },
    	methods: {
    	    fetchData(afterLoaded){
    	    	let self = this;
                let userCode = this.$route.query.userCode || "";
                self.gameId = this.$route.query.gameId || "";
        		RemoteDAO.callJCL11124(userCode,self.gameId,self.pageNum,self.pageSize,data => {
        			self.$store.dispatch('setLoading', {visible: false});
            		if(data.error === "0"){
                		let dataList = {};
                		dataList.list = data.data.body.holders;
                		if(dataList.list.length > 0){
                    		let list = [];
                    		_.each(dataList.list, function (item, index) {
                        		let object = {};
                        		object.stock_name = item.stock_name;
                        		object.stock_code = item.stock_code;
                        		if(item.exchange_type === 1 || item.exchange_type == "1"){
                        			object.exchange_type = "SH";
                        		}else{
                        			object.exchange_type = "SZ";
                        		}
                        		object.keep_cost_price = item.keep_cost_price;
                        		object.last_price = item.last_price; //现价
                        		object.current_vol = item.current_vol; // 持仓数量
                        		object.income_balance = item.income_balance; // 持仓数量
                        		object.position = item.position; // 持仓数量
                        		if(item.keep_cost_price>0){
                            		object.yieldRate = CommonUtil.toFixed((item.last_price - item.keep_cost_price) / item.keep_cost_price * 100, 2);
                        		}else{
                            		object.yieldRate ="--";
                        		}                        		

                        		list.push(object);
                   	    	});
                        	self.list = self.list.concat(list);
                    		//增加一个分页
                    		if(dataList.list.length === self.pageSize){
                        		self.pageNum = self.pageNum + self.pageSize;
                        		self.hasmore = true;
                        		self.hasInit = true;
                    		}else{
                        		self.hasmore = false;
                    		}
                    		afterLoaded(self.hasmore);
                		}else{
                			if(self.pageNum === 0){
                			   self.showError = true;
                			   self.errorMessage = "大王，他还没有持仓哦！";
                			   self.hasmore = 'error';
                			}else{
                				self.hasmore = false;
                			}
                			afterLoaded(self.hasmore);
                		}
            		}else{
            			  self.hasmore = false;
            			  afterLoaded("error");
            			  self.showError = true;
                		  self.errorMessage = data.data;
            		}
        		});
    	    },
    	    loadBottom() {
        		let vm = this;
        		vm.fetchData(hasmore => {
        	    	if(hasmore === "error"){
        	    		vm.$refs.loadmore.onBottomError();
        	    	}else if(!hasmore){
            			vm.$refs.loadmore.onBottomAllLoaded();//全部数据加载完成
          			} else {
            			vm.$refs.loadmore.onBottomLoaded(); //单次加载成功
          			}
        		});
      		},
      		toQuotation(item){
      		  const stockCode = item.exchange_type + item.stock_code;
          	  RemoteDAO.callStockLive(stockCode,"game","1&isAttendGame=1&gameId=" + this.gameId);
      		}
    	},
    	destroyed(){
          this.$store.dispatch('setLoading', {visible: false});
        }
    }
</script>

<style lang="css" scoped>
	.stock-detail{
    padding: 10px 10px 10px 18px;
    display:flex;
    align-items:center;
	justify-content:center;
	color:#565656;
}
.stock-code{
    color:#999999;
    font-size:1.1rem;
}
.grey-line-long-second{
    width:100%;
    height:0.8px;
    background-color: #E7E7E7;
}
.game-position{
    padding-bottom:50%;
}
.error{
	width:100%;
	height:40px;
	text-align: center;
	font-size:15px;
	margin-top: 25%;
}
.game-position  .stock-name{
    color:#565656;
    font-size:1.5rem;
}
.game-position .header{
	display:flex;
	background-color: #F1F3F6;
	border-bottom: 0.5px solid #E7E7E7;
	padding: 5px 20px 5px 20px;
	font-size:12px;
	color:#999999;
}
.header .part1{
	flex:1.8;
}
.stock-detail .part3, .stock-detail .part4{
    flex:1.4;
}
.header	.part2{
	flex:1.5
}
.header	.part3, .stock-detail .part1{
	flex:1.6;
}
.header	.part4, .header	.part5, .stock-detail .part5{
    flex:1;
}
.stock-detail .part2{
	flex:1.3;
}
.text-middle{
	text-align: center;
}
.sell-out{
	text-align: center;
    width:15%;
    margin:0 2% 0 3%;
    background-color:#1BAFEC;
    color:#fff;
    border-radius: 5px;
    padding:3px 2px 3px 2px;
    font-size: 1.2rem;
}
</style>